import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
    FlatList,
    Platform,
    Alert,
    Image,
    Dimensions
} from 'react-native';


import Swiper from 'react-native-swiper';

var {width, height} = Dimensions.get('window');


export class imageSliderDemo extends Component {

    constructor(props){
        super(props);

        this.state = {};
    }

    render(){
        return (
            <View style={{height: 200, marginTop: 64}}>
                <Swiper>
                    <View style={[styles.slideItem, {backgroundColor: '#aaa'}]}>
                        <Image key={0} style={styles.imageStyle} source={require('../assets/images/1.jpg')} />
                    </View>
                    <View style={[styles.slideItem, {backgroundColor: '#bbb'}]}>
                        <Image key={1} style={styles.imageStyle} source={require('../assets/images/2.jpg')} />
                    </View>
                    <View style={[styles.slideItem, {backgroundColor: '#ccc'}]}>
                        <Image key={2} style={styles.imageStyle} source={require('../assets/images/3.jpg')} />
                    </View>
                    <View style={[styles.slideItem, {backgroundColor: '#ddd'}]}>
                        <Image key={3} style={styles.imageStyle} source={require('../assets/images/4.jpg')} />
                    </View>
                </Swiper>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    slideItem: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },

    imageStyle: {
        width: width,
        resizeMode: 'cover'
    }
});